<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
	<script src="lib/prop-types.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#root"));
	// 渲染属性（render props）:可以通过父组件向子组件传递一个函数，在子组件中调用函数并将函数的返回值进行渲染。
	const boyBookList = [
		{
			id:1,
			bookName:"射雕英雄传",
			author:"金庸"
		},{
			id:2,
			bookName: "圆月弯刀",
			author: "古龙"
		}
	];
	const girlBookList = [
		{
			id:3,
			bookName:"还珠格格",
			author:"琼瑶"
		},{
			id:4,
			bookName: "情深深雨朦朦",
			author:"琼瑶"
		}
	
	];
	// props--->{bookList,render}
	const BookList = props =>(
		<div>
			{
				props.render()
			}
			{
				props.bookList.map(item=>(
					<React.Fragment key={item.id}>
						<h3>《{item.bookName}》</h3>
						<p>作者：{item.author}</p>
					</React.Fragment>
				))
			}
		</div>
	);
	BookList.propTypes = {
		// 要求类型必须是一个数组,且不允许省略
		bookList:PropTypes.array.isRequired,
		// 接收的属性render类型是一个函数，且不允许省略
		render:PropTypes.func.isRequired
	}
	
	const App = ()=>(
		<>
			<BookList render={()=>(
				<h3 style={{color:"green"}}>男生必读</h3>
			)} bookList={boyBookList}/>
			<hr/>
			<BookList render={()=>(
				<h3 style={{color:"pink"}}>女生爱看</h3>
			)} bookList={girlBookList}/>
		</>
	)
	root.render(<App/>);
</script>
</html>